<template>
  <div>
    <img @click="gotoLogin" class="register-back" src="@/assets/img/u338.png" alt="">
    <img class="register-icon" src="@/assets/img/u339.png" alt="">
    <div id="box">
      <div class="username">
        <auth-input type="text" placeholder="请输入手机号" rule="^\d{4,16}$" err_message="请输入4-16位的手机号" @sendData="getUsername"></auth-input>
      </div>
      <div class="nickname">
        <auth-input type="text" placeholder="请输入昵称" rule="^\w{3,16}$" err_message="请输入3-16位的昵称" @sendData="getNickname"></auth-input>
      </div>
      <div class="password">
        <auth-input type="password" placeholder="请输入密码" rule="^\w{3,16}$" err_message="请输入3-16位的密码" @sendData="getPassword"></auth-input>
      </div>
      <div class="btn">
        <auth-btn text="注 册" @sendClick="getRegister"></auth-btn>
      </div>
    </div>
  </div>
</template>

<script>
  import authInput from '@/commonComponent/authInput.vue'
  import authBtn from '@/commonComponent/authButton.vue'
  import registerApi from '@/api/register'

  export default {
    data() {
      return {
        username: '',
        password: '',
        nickname: ''
      }
    },
    components: {
      authInput,
      authBtn
    },
    methods: {
      getUsername(name) {
        this.username = name
      },
      getPassword(name) {
        this.password = name
      },
      getNickname(name) {
        this.nickname = name
      },
      getRegister() {
        console.log('注册点击事件');
        registerApi.getRegister(this.username, this.password, this.nickname).then(res => {
          let resp = res.data
          console.log(res);
          if (resp.statusCode) {
            this.$toast.fail(resp.message)
          } else {
            this.$toast.success(resp.message)
            // if (this.afterle) {
            //   this.$router.push({ path: '/login' })
            // }
            setTimeout(() => {
              this.$router.push({ path: '/login'})
            }, 1000);
          }
        })
      },
      gotoLogin() {
        this.$router.push({ path: '/login' })
      }
    }
  }
</script>

<style scoped>
  div {
    background-color: #f2f2f2;
  }

  .register-back {
    position: absolute;
    width: 8vw;
    top: 4vw;
    left: 4vw;
  }

  .register-icon {
    display: block;
    width: 30vw;
    margin: 20vw auto 5vw auto;
  }

  #box {
    max-width: 100vw;
    margin: 0 5vw;
  }

  input[type="text"] {
    display: flex;
    width: 100%;
    padding: 4vw;
    outline: none;
    border: none;
    margin-top: 4vw;
    border-bottom: 1px solid #666;
    background: #f2f2f2;
    font-size: 5vw;
  }

  input[type="password"] {
    display: flex;
    width: 100%;
    padding: 4vw;
    margin-top: 4vw;
    outline: none;
    border: none;
    border-bottom: 1px solid #666;
    background: #f2f2f2;
    font-size: 5vw;
  }

  input[type="button"] {
    margin-top: 15vw;
    width: 100%;
    height: 13vw;
    text-align: center;
    font-size: 16px;
    border-radius: 7vw;
    outline: none;
    border: none;
    background-color: #cc3300;
    color: #f1c7b9;
    font-weight: 700;
    font-size: 5vw;
  }
</style>
